<template>
    <div class="particulars" v-for="(item,index1) in data" :key="item">
                <el-row  justify="center">
                    <el-col :span="2" style="height: 60px;padding: 5px 2px; ">
                        <el-button color="#1AB394" style="color: #fff; margin-left: 10px;" :class="'btn'+item.id">{{ index1+1 }}</el-button>
                    </el-col>
                    <el-col :span="22" style="border-left:1px solid #eee;" >
                        <el-row justify="center">
                          <el-col :span="21" style="border-bottom:1px solid #eee ;height: 60px; 
                          padding-left: 10px; padding-top: 20px;">
                            <!-- <p>下列哪一项不属于阴阳偏衰的病理</p> -->
                            <p>{{ item.topic }}</p>
                          </el-col>
                          <el-col :span="3"  style="border:1px solid #eee; padding-top: 20px; padding-left: 15px;">
                            <p><a name="score" class="text-primary">{{ item.score }}</a>分</p> 
                          </el-col>
                        </el-row>
                        <div style="margin: 10px 0 10px 10px;" >
                          <p v-for="(option,index) in item.option" :key="option">{{  String.fromCharCode(65+index)}}.{{ option }}</p>
                          <!-- <p>B.我是选项B</p>
                          <p>C.我是选项C</p>
                          <p>D.我是选项D</p> -->
                        </div>
                    </el-col>
                </el-row>
                <el-row class="answer" >
                    <el-col  :span="2">
                    </el-col>
                    <el-col :span="22" style="max-height: 150px; overflow-y: scroll; ">
                        <p>考生答案:&nbsp;&nbsp;&nbsp;
                         <div class="test-footer radiosBoxs" v-if="item.question_types==='编程题'">
                            <div style="border-bottom: 1px solid #e6e6e6; padding: 5px;">
                            <span>code</span> 
                            </div>
                            <pre style="padding: 5px;">{{ item.stu_answer}} </pre>
                         </div>
                         <el-link type="info" v-else >{{ item.stu_answer}} </el-link>
                        </p>
                        <p>标准答案:&nbsp;&nbsp;&nbsp;
                            <div class="test-footer radiosBoxs" v-if="item.question_types==='编程题'">
                                <div style="border-bottom: 1px solid #e6e6e6; padding: 5px;">
                                <span>code</span> 
                                </div>
                                <pre style="padding: 5px;">{{ item.sta_answer}} </pre>
                            </div>
                            <el-link v-else>{{ item.sta_answer }}</el-link>
                        </p>
                    </el-col>
                </el-row>
                <el-row  style="margin:10px 0;" v-if="flag!=3">
                    <el-col  :span="21">
                    </el-col>
                    <el-col :span="1" style="max-height: 150px" justify="end">
                       <el-button color="#1AB394" style="color: #fff;"  @click="updateScore" v-if="!isUpdateScore">
                        得分<span style="color:#Ed5565">{{ item.points_scored }}</span>分
                        </el-button>
                        <el-input-number
                            v-model="num"
                            :min="1"
                            :precision="1"
                            :step="0.5"
                            controls-position="right"
                            @mouseleave="handleChange(value,item)"
                            style="width:100px"
                            v-else
                         />
                    </el-col>
                </el-row>
        </div>
   
</template>

<script setup>
import {ref,toRefs} from 'vue'
/**接收需要展示的题目数据 */
const props = defineProps({
    data:Array,//试题数据
    id:Number ,//试卷id
    flag:Number,// 试卷预览的标志
})
const {data,id,flag} = toRefs(props)
// console.log(data,'testSh---data  试卷 id',id)

   /****----------修改单题分值---------------**/
   const isUpdateScore = ref(false)
    const  updateScore=()=>{
        isUpdateScore.value=true
    }
    
    const num = ref(1)
    const handleChange = (value,item) => {
      console.log('修改分数',value,item)
      ElMessageBox.alert(`修改数据库id${id.value}-${item.id}的记录`, '', {
        confirmButtonText: 'OK', 
     }).then(() => {// 如下为修改静态页面的分数
       data.value.filter(i=>{
            if(i.id=item.id){
                i.score=num.value
                i.points_scored=num.value
            }
       })
      ElMessage({
        type: 'success',
        message: '修改成功',
      })
    })
      isUpdateScore.value=false
    }
</script >
<style lang="less" scoped>
   .types p {
        font-size: 15px;
        margin-top: 9px
    }
    .particulars {
        margin-top: 10px;
        border: 1px solid #eeeeee;
        overflow: auto;
    }
    
    .answer {
        background: #e6e6e6;
        overflow: auto;
        padding-top: 10px;
        // padding-bottom: 10px;
        border: 1px solid #eeeeee;
        margin: 0 0;
    }
    .answer p{
        margin: 0 0 10px;
    }
    .types p {
        font-size: 15px;
        margin-top: 9px
    }
    .particulars {
        margin-top: 10px;
        border: 1px solid #eeeeee;
        overflow: auto;
    }
    
    .answer {
        background: #e6e6e6;
        overflow: auto;
        padding-top: 10px;
        // padding-bottom: 10px;
        border: 1px solid #eeeeee;
        margin: 0 0;
    }
    .answer p{
        margin: 0 0 10px;
    }
    
.header-desc{
    a{
        cursor: pointer;
        color: #337ab7;
        text-decoration: none;
        background-color: transparent;
    }
}

// .affix-container{
//     position:relative;
// }
.box-card{
    // width:100px;
    background:#eeeeee;
    bottom:60px;
    // position:fixed;
    position:absolute;
    right:3.5%;
    z-index:9999
}
.item {
  padding: 5px 0;
}

.radiosBoxs {
    padding: 10px 0 5px;
    width: auto;
    display: inline-block;
}
.test-footer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 5px;
    text-align: left;
    background-color: #f3f3f3;
    box-shadow: #e6e6e6;
    margin: 5px;
}
</style>